<template>
    <div>
        <a-button type="primary" @click="openDialog">增加</a-button>
        <a-modal v-model="visible" title="增加商品" v-bind="layout" @ok="handleOk">
            <a-form-model ref="addForm" :model="addForm" :rules="rules" v-bind="layout">
                <a-form-model-item has-feedback label="商品名称" prop="name">
                    <a-input v-model="addForm.name" />
                </a-form-model-item>
                <a-form-model-item has-feedback label="封面图片" prop="index_images">
                    <a-upload
                        action="/api/upload"
                        list-type="picture"
                        :multiple="true"
                        @change="changeIndexImage"
                        >
                        <a-button> <a-icon type="upload" /> 上传 </a-button>
                        </a-upload>
                </a-form-model-item>
               <a-form-model-item has-feedback label="细节图片" prop="detail_images">
                    <a-upload
                        action="/api/upload"
                        list-type="picture"
                        :multiple="true"
                        @change="changeDetailImage"
                        >
                        <a-button> <a-icon type="upload" /> 上传 </a-button>
                        </a-upload>
                </a-form-model-item>
               
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
import {add} from '../../services/product'
import {imageListToArray} from '../../utils'
export default {
    data(){
        return {
            indexImageList:[],
            detailImageList:[],
            products:[],
            visible:false,
            addForm:{

            },
            rules:{
               
            },
            layout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 16 },
            },
        }
    },
    methods:{
        async handleOk(){
            // await add(this.addForm);
            let data = {...this.addForm,
            indexImages:imageListToArray(this.indexImageList),
            detailImages:imageListToArray(this.detailImageList)};
            await add(data);
            this.visible = false;
            this.$emit("show");
        },
        async openDialog(){
            this.visible = true;
            
        },
        changeIndexImage({fileList}){
            this.indexImageList = fileList;
        },
        changeDetailImage({fileList}){
            this.detailImageList = fileList;
        }


    
    }
};
</script>

<style>
</style>